<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_全屏遮罩</title>
  <style>
    .mask {
      background-color: rgba(0,0,0,0.4);
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
</head>
<body>
<div>
  <div class="mask">

  </div>
  <div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam aperiam at autem cum, distinctio earum
      itaque laudantium, libero nostrum nulla odit pariatur perspiciatis quod repudiandae, sapiente similique. Quisquam,
      voluptatum.
    </div>
    <div>Eaque, eum, sed. Cumque dolorum esse itaque libero tempore unde, veritatis voluptas? Animi consequatur,
      corporis deserunt dolores earum facilis laudantium libero necessitatibus non numquam odio quasi rem tempore vel
      voluptas.
    </div>
    <div>Accusantium autem, corporis culpa facere itaque odio provident vel! Ad animi asperiores ea, eligendi est id
      quis repudiandae saepe temporibus voluptatum! Ad, autem cum itaque mollitia nobis nulla numquam reprehenderit!
    </div>
    <div>Ab alias consequuntur cupiditate doloribus et nam nesciunt. Ad aliquam cupiditate dicta distinctio enim impedit
      incidunt laboriosam quasi, recusandae voluptatum. Aliquam beatae itaque praesentium voluptate. Architecto
      assumenda ducimus illo pariatur?
    </div>
    <div>Aspernatur dicta dignissimos harum ipsum, necessitatibus possimus provident reprehenderit sed sequi totam,
      veritatis vero voluptate voluptates. Aspernatur consectetur consequatur dolorem exercitationem in iusto labore
      mollitia, nam quibusdam sunt voluptates voluptatibus!
    </div>
    <div>Ad at, commodi deleniti dolores ducimus eaque hic nemo neque nulla perspiciatis quae soluta, veritatis vero.
      Alias aliquam corporis dolor dolorum eius, nisi odio provident quia quidem sint vero voluptatum?
    </div></div>
  <div></div>
  <div></div>
</div>
</body>
</html>